<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Recommendations</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css', _v=0.1) }}">
</head>
<body>
    <div class="container">
        <h1>Product Recommendations</h1>

        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <p class="error">{{ message }}</p>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% if interacted_products %}
            <h2>Your Interactions</h2>
            <table class="product-table">
                <thead>
                    <tr>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Rating</th>
                        <th>Source</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in interacted_products %}
                        <tr>
                            <td>{{ product.product_id }}</td>
                            <td>{{ product.product_name }}</td>
                            <td>{{ product.description }}</td>
                            <td>${{ "%.2f"|format(product.price|float) }}</td>
                            <td>{{ product.rating }}</td>
                            <td>{{ product.source }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}

        {% if recommended_products %}
            <h2>Recommended Products</h2>
            <table class="product-table">
                <thead>
                    <tr>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Rating</th>
                        <th>Score</th>
                        <th>Source</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in recommended_products %}
                        <tr>
                            <td>{{ product.product_id }}</td>
                            <td>{{ product.product_name }}</td>
                            <td>{{ product.description }}</td>
                            <td>${{ "%.2f"|format(product.price|float) }}</td>
                            <td>{{ product.rating }}</td>
                            <td>{{ "%.2f"|format(product.score|float) }}</td>
                            <td>{{ product.source }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}

        <a href="/" class="button">Back to Home</a>
    </div>
</body>
</html>